<template>
	<view class="container">
		<view class="list-item" @click="showPopup">
			<text class="text-left">社区简介</text>
		</view>
		<view style="height: 50rpx;"></view>
		<view class="list-item" @click="goToPersonalDataEdit()">
			<text class="text-left">个人资料</text>
			<u-icon class="icon-right" name="arrow-right" size="60rpx"></u-icon>
		</view>
		<view class="list-item" @click="goToAccountSetting()">
			<text class="text-left">账号设置</text>
			<u-icon class="icon-right" name="arrow-right" size="60rpx"></u-icon>
		</view>
		<!-- <view style="height: 50rpx;"></view>
		<view class="list-item">
			<text class="text-left">给我们评分</text>
			<u-icon class="icon-right" name="arrow-right" size="60rpx"></u-icon>
		</view>
		<view class="list-item">
			<text class="text-left">推荐好友</text>
			<u-icon class="icon-right" name="arrow-right" size="60rpx"></u-icon>
		</view>
		<view class="list-item">
			<text class="text-left">用户服务条款</text>
			<u-icon class="icon-right" name="arrow-right" size="60rpx"></u-icon>
		</view>
		<view class="list-item">
			<text class="text-left">隐私条款</text>
			<u-icon class="icon-right" name="arrow-right" size="60rpx"></u-icon>
		</view>
		<view class="list-item">
			<text class="text-left">信息收集说明</text>
			<u-icon class="icon-right" name="arrow-right" size="60rpx"></u-icon>
		</view>
		<view class="list-item">
			<text class="text-left">第三方SDK信息</text>
			<u-icon class="icon-right" name="arrow-right" size="60rpx"></u-icon>
		</view>
		<view class="list-item">
			<text class="text-left">账号管理规范</text>
			<u-icon class="icon-right" name="arrow-right" size="60rpx"></u-icon>
		</view> -->
		<view style="text-align: center; margin-top: 30rpx;margin-bottom: 30rpx;">
			<text style="font-weight: bold;font-size: 35rpx;">联系我们：universe_nexus@163.com</text>
		</view>
		<view class="list-item" @click="isShowFolderSelection=true">
			<text class="text-left" >手动设置服务器IP地址</text>
			<u-icon class="icon-right" name="arrow-right" size="60rpx"></u-icon>
		</view>
		<view class="list-item">
			<text class="text-left">版本</text>
			<text class="text-version">v1.1.0正式版</text>
		</view>
		<view class="list-item" @click="clear()">
			<text class="text-left">清除本地所有数据</text>
		</view>
		<view class="list-item logout" @click="logout()">
			<text class="text-logout">退出登录</text>
		</view>

		<u-popup :show="popupVisible" mode="center">
			<view class="popup-content">
				<text class="popup-title">社区简介</text>
				<text class="popup-description">
					LINK - Learning, Inspiring, Networking, and Knowledge
				</text>
				<u-button class="close-button" @click="popupVisible = false">关闭</u-button>
			</view>
		</u-popup>
		<view  :class="['modal', { 'slide-in': isShowFolderSelection, 'slide-out': !isShowFolderSelection }]" @click="isShowFolderSelection=false" >
			 <view class="modal-content" @click.stop>
			   <view class="input-container">
			     <view class="ip-display">
			       当前与服务器连接状态:
			       <span :class="{'connected': isLocalConnect, 'disconnected': !isLocalConnect}">
			         <span class="status-dot" :class="{'green-dot': isLocalConnect, 'red-dot': !isLocalConnect}"></span>
			         {{ isLocalConnect ? '已连接' : '断开' }}
			       </span>
			     </view>
			     <view class="ip-display">当前服务器 IP 地址:</view>
			     <view class="ip-value">{{ oldIp }}</view>
			     <input 
			       class="ip-input" 
			       type="text" 
			       placeholder="请输入后端服务器的 IPv4 地址" 
			       v-model="ip" 
			     />
			   </view>
			   <u-button class="submit-button" @click="setIp">修改</u-button>
			 </view>

		</view>
	</view>
</template>

<script>
	import data from '@/utils/data.js'
	import { mapState } from 'vuex';
	export default {
		computed: {
			    ...mapState(["isConnect"]), // 映射 Vuex 状态
			 },
		watch:{
			isConnect(newVal,oldVal) {
				this.isLocalConnect=uni.getStorageSync('isConnect')
			 },
		},
		data() {
			return {
				popupVisible: false ,// 控制弹出层显示状态:false,
				isShowFolderSelection:false,
				ip:null,
				oldIp:null,
				isLocalConnect:false,
			}
		},
		onLoad() {
			this.oldIp=this.baseUrl;
			this.isLocalConnect=uni.getStorageSync('isConnect')
		},
		methods: {
			setIp(){
				uni.showModal({
					title:"注意",
					content:"确定后,将会重启整个应用",
					cancelText:"取消",
					confirmText:"确定",
					success: (res) => {
						if(res.confirm){
							this.isShowFolderSelection=false
							var baseUrl="http://"+this.ip+":8888"
							var addr=this.ip+':8888'
							uni.setStorageSync('baseUrl',baseUrl)
							uni.setStorageSync('addr',addr)
							//重启app
							plus.runtime.restart()
						}else{
							uni.showToast({
								title:"已取消",
								icon:"none",
								duration:500
							})
						}
					}
				})
			},
			showPopup() {
				console.log('点击社区简介');
				this.popupVisible = true; // 显示弹出层
			},
			goToAccountSetting(){
				uni.navigateTo({
				  url: '/pages/setting/accountSetting/accountSetting',
				}).catch((err) => {
				  console.error('Navigation error:', err);
				});
			},
			goToPersonalDataEdit(){
				uni.navigateTo({
				  url: '/pages/setting/personalDataEdit/personalDataEdit',
				}).catch((err) => {
				  console.error('Navigation error:', err);
				});
			},
			clear(){
				uni.showModal({
					title:"注意",
					content:"清除App所有数据，包括你的账户信息以及缓存吗？",
					cancelText:"算了",
					confirmText:'是的',
					success: (res) => {
						if(res.confirm){
							this.$websocket.close()
							uni.clearStorageSync()
							uni.reLaunch({
								url:"/pages/home/home"
							})
						}else{

						}
					}
				})
			},
			logout() {
				uni.showModal({
					title:"注意",
					content:"确定退出账号吗？",
					cancelText:"算了",
					confirmText:'确定',
					success: (res) => {
						if(res.confirm){
							const keysToRemove = ['UID', 'token'];
										
							// 创建一个函数来移除存储的键
							const removeStorage = (key) => {
							    return new Promise((resolve, reject) => {
							        uni.removeStorage({
							            key: key,
							            success: () => {
							                console.log(`清除成功: ${key}`);
							                resolve();
							            },
							            fail: () => {
							                console.log(`清除失败: ${key}`);
							                reject();
							            }
							        });
							    });
							};
										
							// 移除所有指定的键
							Promise.all(keysToRemove.map(removeStorage))
							    .then(() => {
							        uni.showToast({
							            title: '退出登录',
							            icon: 'success',
							            duration: 2000
							        });
									this.$websocket.close();
							        // 2秒后重新导航
							        setTimeout(() => {
							            uni.reLaunch({
							                url: '/pages/home/home'
							            }).catch(err => {
							                console.error("Navigation error:", err);
							            });
							        }, 2000);
							    })
							    .catch(err => {
							        console.error("移除存储失败:", err);
							    });
						}else{
				
						}
					}
				})
			    
			}

		}
	}
</script>

<style>
.container {
	padding: 30rpx; /* 增大容器内边距 */
	background-color: #f8f8f8;
	height: 100vh;
}

.list-item {
	display: flex;
	flex-direction: row;
	justify-content: space-between; /* 确保文字在左边，图标在右边 */
	align-items: center; /* 垂直居中 */
	padding: 30rpx; /* 增大列表项内边距 */
	background-color: #fff;
	border-radius: 10rpx; /* 圆角 */
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); /* 阴影效果 */
	margin-bottom: 15rpx; /* 列表项之间的间距 */
}

.text-left {
	font-size: 36rpx; /* 增大字体 */
	color: #333;
	flex: 1; /* 占据左侧空间 */
	line-height: 60rpx; /* 使文字高度与图标相同 */
}

.icon-right {
	color: #999;
	width: 60rpx; /* 增大图标宽度 */
	height: 60rpx; /* 增大图标高度 */
}

.text-version {
	font-size: 30rpx; /* 增大版本文本 */
	color: #999;
	margin-left: 10rpx; /* 版本文本之间的间距 */
}

.logout {
	background-color: #f8d7da; /* 退出登录项背景色 */
	justify-content: center; /* 水平居中 */
	padding: 30rpx 0; /* 上下内边距 */
}

.text-logout {
	color: #721c24; /* 退出登录项文字颜色 */
	font-size: 36rpx; /* 增大退出登录文本字体 */
	font-weight: bold; /* 加粗 */
	text-align: center; /* 文本居中 */
	width: 100%; /* 确保占满整个空间 */
}

.popup-content {
	padding: 40rpx;
	background-color: #ffffff; /* 背景颜色 */
	border-radius: 10rpx;
	box-shadow: 0 2rpx 20rpx rgba(0, 0, 0, 0.2); /* 更明显的阴影 */
}

.popup-title {
	font-size: 40rpx; /* 标题字体大小 */
	color: #333; /* 标题颜色 */
	margin-bottom: 20rpx; /* 标题与内容间距 */
	margin-right: 20rpx;
	text-align: center; /* 居中对齐 */
	font-weight: bold; /* 加粗 */
}

.popup-description {
	font-size: 30rpx; /* 描述字体大小 */
	color: #666; /* 描述颜色 */
	line-height: 1.5; /* 行高 */
	margin-bottom: 30rpx; /* 描述与关闭按钮间距 */
	text-align: justify; /* 两端对齐 */
}

.close-button {
	width: 100%;
	background-color: #007AFF !important; /* 按钮背景颜色 */
	color: #fff !important; /* 按钮文字颜色 */
	border-radius: 5rpx; /* 圆角 */
	margin-top: 20rpx; /* 按钮与内容的间距 */
}
.modal {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end; /* 从底部对齐 */
  z-index: 1; /* 确保模态框位于最上层 */
  /* 初始状态为隐藏 */
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.5s ease, opacity 0.5s ease; /* 添加过渡效果 */
  /* 内容区域样式 */
 }
  
  /* 滑出效果 */
  .modal.slide-out {
    transform: translateY(100%); /* 滑出 */
    opacity: 0; /* 完全透明 */
  }
  .modal-content {
    background-color: #1e1e2f; /* 深色背景 */
    padding: 20rpx;
    border-radius: 30rpx;
    width: 100%;
    height: 50%; 
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* 增加阴影效果 */
    display: flex;
    flex-direction: column;
    position: relative;
    color: #fff; /* 文字颜色为白色 */
  }
  
  .modal.slide-in {
    transform: translateY(0); /* 滑入 */
    opacity: 1; /* 完全可见 */
  }
  
  .input-container {
    margin-bottom: 20px;
  }
  
  .ip-display {
    font-size: 16px;
    margin-bottom: 10px;
    font-weight: 500;
  }
  
  .ip-value {
    color: #00ffcc; /* 亮绿色，增加科技感 */
    font-family: 'Courier New', Courier, monospace; /* 使用等宽字体 */
	padding-bottom: 20rpx;
  }
  
  .ip-input {
    margin: auto;
    padding: 12rpx; /* 增加内边距 */
    border: 1px solid #444; /* 深色边框 */
    border-radius: 6px;
    font-size: 16px;
    transition: border-color 0.3s;
    background: rgba(255, 255, 255, 0.1); /* 半透明背景 */
    color: #fff; /* 输入框文字颜色 */
  }
  
  .ip-input::placeholder {
    color: #aaa; /* 占位符颜色 */
  }
  
  .ip-input:focus {
    border-color: #00ffcc; /* 焦点状态下的边框颜色 */
    outline: none;
  }
  
  .submit-button {
    width: 100%;
    background-color: #00ffcc; /* 亮绿色 */
    color: #1e1e2f; /* 按钮文字颜色 */
    border: none;
    border-radius: 6px;
    padding: 12px; /* 增加内边距 */
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s; /* 添加变换效果 */
  }
  
  .submit-button:hover {
    background-color: #00cc99; /* 悬停状态下的颜色 */
    transform: translateY(-2px); /* 悬停时轻微上升 */
  }
.status-dot {
  display: inline-block;
  width: 10px;  /* 圆点的宽度 */
  height: 10px; /* 圆点的高度 */
  margin-left: 20rpx;
  border-radius: 50%; /* 圆形 */
  margin-right: 5px; /* 圆点与文本之间的间距 */
  vertical-align: middle; /* 垂直对齐 */
}

.green-dot {
  background-color: #00ff00; /* 绿色 */
}

.red-dot {
  background-color: #ff0000; /* 红色 */
}

.connected {
  color: #00ffcc; /* 连接状态文本颜色 */
}

.disconnected {
  color: #ff4d4d; /* 断开状态文本颜色 */
}

</style>
